<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/logon.css">
</head>
<body>
    <script>
    var tools = {};
       tools.ajax = function (options) {
            options = options || {};
            options.type = (options.type || "GET").toUpperCase();
            options.dataType = options.dataType || "json";
            var params = ""//tools.formatParams(options.data);

            //创建 - 非IE6 - 第一步
            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            } else { //IE6及其以下版本浏览器
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            //接收 - 第三步
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    var status = xhr.status;
                    if (status >= 200 && status < 300) {
                        options.success && options.success(xhr.responseText, xhr.responseXML);
                    } else {
                        options.fail && options.fail(status);
                    }
                }
            }

            //连接 和 发送 - 第二步
            if (options.type == "GET") {
                xhr.open("GET", options.url+ params, true);
                xhr.send(null);
            } else if (options.type == "POST") {
                xhr.open("POST", options.url, true);
                //设置表单提交时的内容类型
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(params);
            }
        }
    function usergo(){
       var name=document.getElementById('field-username').value;
        var pwd=document.getElementById('field-password').value;
        if((name!=''&&name!=null)&&(pwd!=''||pwd!=null)){
              tools.ajax({
                  url: 'uc?mname='+name+'&mpwd='+pwd,
                  type: 'GET',
                  dataType: 'json',
                  success: function (response, xml) {
                      var result =response;
                      if(result=='true'){
                          window.location.href="index.html?uname="+name; 
                      }else{
                          alert(result);
                      }

                  },
                  fail: function (status) {
                      alert("服务端错误，稍后重试")
                  }
              })
        }else{
            alert('用户名或者密码为空.')
        }
    }
    </script>    

<div class="login-wrapper">
    <div id="login-window" class="border-layout">
        <div class="ppm-logo"></div>
        <div class="transparent-bg"></div>
        <div class="center">
            <div class="left-panel">
                <div id="logo"></div>
            </div>
            <form method="POST" action="/uc" name="logon" autocomplete="off">
            <div class="right-panel">
                <div id="title">
                    
                </div>
                <div>
                        <div class=" "><label  id="label-USERNAME">用户：</label><input type="text" id="field-username" name="USERNAME" value=""></div>
                        <div class="clearboth"></div>

                        <div style="margin-top: 20px;"><label  id="label-PASSWORD">密码：</label><input type="password" id="field-password" name="PASSWORD" value=""></div>
                        <div class="clearboth"></div>

                </div>

                <div class="buttons">
                    <div class="button primary" id="label-LOGON_SUBMIT_BUTTON_CAPTION" onclick="usergo()">登录</div>
                    <div class="clearboth"></div>
                </div>
            </div>
            </form>
            <div class="clearboth"></div>
        </div>
        <div class="vborder hborder corner cr0"></div>
        <div class="vborder hborder corner cr1"></div>
        <div class="vborder hborder corner cr2"></div>
        <div class="vborder hborder corner cr3"></div>
        <div class="vborder vbl"></div>
        <div class="vborder vbr"></div>
        <div class="hborder hbt"></div>
        <div class="hborder hbb"></div>
    </div>
    </div>
    
</body>
</html>